<template>
	<div id="app">
		<!-- 头部组件内容 -->
		<VmHeader></VmHeader>
		<!-- 内容区 -->
		<div id="content">
			<!-- 左侧内容组件 -->
			<div class='left'  >
				 <!-- 第1个数据 -->
				 <div class="vmpanel">
					<div class = 'panelcontent' >
						<h2>新增确诊TOP10</h2>
							<div class="chart  left1">数据内容</div>
					</div>
				</div>
				<!-- 第二个数据 -->
				 <div class="vmpanel">
						<div class = 'panelcontent' >
						<h2>大洲感染总人数趋势图</h2>
							<div class="chart  left2">数据内容</div>
						</div>
				</div>
				<!-- //第三个数据 -->
				<div class="vmpanel">
					<div class = 'panelcontent' >
						<h2>大洲感染人数饼状图</h2>
							<div class="chart  left3">数据内容</div>
					</div>
				</div>
			</div>

            <!-- 中间内容组件 -->
			<VmCenter class='center' 
			:centerTop ='centerTop'
      :centertu = 'centertu'
      >
      </VmCenter>
			
     <!-- 右侧内容组件 -->
			<div class='right' >
				<!-- //疫情国家治愈率 -->
				  <div class="vmpanel">
					<div class = 'panelcontent' >
						<h2>疫情国家治愈率</h2>
							<div class="chart  left4">数据内容</div>
					</div>
				</div>
  		<!-- //新增治愈和死亡人数 -->
				 <div class="vmpanel">
					<div class = 'panelcontent' >
						<h2>新增治愈和死亡人数</h2>
							<div class="chart  left5">数据内容</div>
					</div>
				</div>
    	<!-- //新增治愈和死亡人数 -->
				 <div class="vmpanel">
					<div class = 'panelcontent' >
						<h2>境外输入病情top10省份</h2>
							<div class="chart  left6">数据内容</div>
					</div>
				</div>
			</div>
	</div>
	</div>
</template>

<script>
import VmHeader from "./components/VmHeader.vue";
import VmCenter from "./components/VmCenter.vue";
// import vmcentertop from "./components/common/VmCenterTop.vue";
// import VmCenterContainer from "components/common/VmCenterContainer.vue";
import VmPanel from "./components/common/VmPanel.vue";
import { getForeinData } from "commonfun/charts.js";

export default {
  name: "app",
  data() {
    return {
      centerTop: {},
      centertu: {}
    };
  },
  methods: {
    //统一初始化echarts方法
    addChart(dom, option) {
      let myChart = echarts.init(dom);
      myChart.setOption(option);
      //页面改变大小时,echarts也跟随改变
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      return myChart;
    },
    //第1个数据新增确诊TOP10
    setOption1(countryAddConfirmRankList) {
      let yAxis = [];
      let xAxis = [];
      for (let val of countryAddConfirmRankList) {
        xAxis.push(val.nation);
        yAxis.push(val.addConfirm);
      }
      let option1 = {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow"
          }
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "3%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: "10"
            },

            // 不显示x坐标轴的样式
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 10
            },
            // y轴的线条改为了2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2
              }
            },

            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "新增确诊",
            type: "bar",
            data: yAxis,
            barWidth: "35%",
            itemStyle: {
              barBorderRadius: 5
            }
          }
        ]
      };
      return option1;
    },
    //第2个数据大洲感染总人数趋势图
    setOption3(continentStatis) {
      let xAxis = [];
      let series = {
        亚洲: [],
        北美洲: [],
        大洋洲: [],
        欧洲: [],
        其他: []
      };

      for (let value of continentStatis) {
        if (
          value.date == "04/05" ||
          value.date == "04/19" ||
          value.date == "04/26"
        ) {
          continue;
        }
        xAxis.push(value.date);
        if (value.statis["亚洲"]) {
          series["亚洲"].push(value.statis["亚洲"]);
        } else {
          series["亚洲"].push(series["亚洲"][series["亚洲"].length - 1]);
        }
        if (value.statis["北美洲"]) {
          series["北美洲"].push(value.statis["北美洲"]);
        } else {
          series["北美洲"].push(series["北美洲"][series["北美洲"].length - 1]);
        }
        if (value.statis["大洋洲"]) {
          series["大洋洲"].push(value.statis["大洋洲"]);
        } else {
          series["大洋洲"].push(series["大洋洲"][series["大洋洲"].length - 1]);
        }
        if (value.statis["欧洲"]) {
          series["欧洲"].push(value.statis["欧洲"]);
        } else {
          series["欧洲"].push(series["欧洲"][series["欧洲"].length - 1]);
        }
        if (value.statis["其他"]) {
          series["其他"].push(value.statis["其他"]);
        } else {
          series["其他"].push(series["其他"][series["其他"].length - 1]);
        }
      }
      let option2 = {
        // 修改两条线的颜色
        color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd"
          },

          //  必须加引号
          right: "10%"
        },
        grid: {
          top: "30%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis,
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#4c9bfd"
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          {
            name: "亚洲",
            type: "line",
            // 折线显示带有弧度
            smooth: true,
            data: series["亚洲"]
          },
          {
            name: "北美洲",
            type: "line",
            smooth: true,
            data: series["北美洲"]
          },
          {
            name: "大洋洲",
            type: "line",
            smooth: true,
            data: series["大洋洲"]
          },
          {
            name: "欧洲",
            type: "line",
            smooth: true,
            data: series["欧洲"]
          },
          {
            name: "其他",
            type: "line",
            smooth: true,
            data: series["其他"]
          }
        ]
      };
      return option2;
    },
    //第3个数据大洲感染总人数饼状图
    setOption4(importStatis) {
      let data = [];
      for (let value of importStatis.TopList) {
        data.push({ name: value.province, value: value.importedCase });
      }
      let option3 = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd",
            fontSize: 12
          },

          //  必须加引号
          right: "10%"
        },
        series: [
          {
            name: "北美洲,欧洲",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "北美洲" },
              { value: 735, name: "欧洲" }
            ]
          }
        ]
      };
      return option3;
    },
    // 第四个 疫情国家治愈率
    setOption5(foreignList) {
      let yAxis1 = [];
      let rate = [];
      let yAxis2 = [];
      let countryList = [0, 1, 2, 5, 6];
      for (let i of countryList) {
        yAxis1.push(foreignList[i].name);
        let cureRate = (
          (foreignList[i].heal / foreignList[i].confirm) *
          100
        ).toFixed(1);
        rate.push(cureRate);
        yAxis2.push(foreignList[i].heal);
      }
      let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      let option4 = {
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%"
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: yAxis1,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          },
          {
            data: yAxis2,
            inverse: true,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            show: false,
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            data: rate,
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function(params) {
                // params 传进来的是柱子对象
                // console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%"
            }
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      };

      return option4;
    },
    // 第五个 世界每周新增治愈和死亡人数
    setOption6(globalDailyHistory) {
      let xAxis = [];
      let series1 = [];
      let series2 = [];
      globalDailyHistory = globalDailyHistory.reverse();
      for (let i = 0; i < globalDailyHistory.length; i += 7) {
        xAxis.push(globalDailyHistory[i].date);
        series1.push(globalDailyHistory[i].all.dead);
        series2.push(globalDailyHistory[i].all.heal);
      }
      series1 = series1.reverse();
      series2 = series2.reverse();
      xAxis = xAxis.reverse();

      var option5 = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          top: "0%",
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },

        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // x轴更换数据
            data: xAxis,
            // 文本颜色
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            // x轴线的颜色为
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12
              }
            },
            // 分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "死亡人数",
            type: "line",
            smooth: true,
            // 修改线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2"
            },
            // 填充颜色设置
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)"
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)"
            },
            // 设置拐点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 鼠标经过显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12
            },
            data: series1
          },
          {
            name: "治愈人数",
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: "#00d887",
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0, 216, 135, 0.4)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 216, 135, 0.1)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)"
              }
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: series2
          }
        ]
      };
      return option5;
    },
    //第六个
    setOption7(importStatis) {
      let data = [];
      for (let value of importStatis.TopList) {
        data.push({ name: value.province, value: value.importedCase });
      }
      let option6 = {
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
          "#ff9f7f",
          "#0096ff"
        ],
        series: [
          {
            type: "pie",
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontSize: 12
            },
            // 链接图形和文字的线条
            labelLine: {
              // 链接图形的线条
              length: 6,
              //  链接文字的线条
              length2: 8
            },
            data: data
          }
        ]
      };
      return option6;
    }
  },
  components: {
    VmHeader,
    VmPanel,
    VmCenter
  },
  mounted() {
    getForeinData().then(res => {
      console.log(res);
      this.centerTop = res.centerTop;
      this.centertu = res.centertu;
    });
    let that = this;
    //线上跨域
    $.ajax({
      //vue.config.js配置devServer跨域
      url: "/api?name=disease_foreign",
      success(res) {
        console.log("数据", res);
        let foreinData;
        foreinData = JSON.parse(res.data);

        // 新增确诊TOP10
        const option1 = that.setOption1(foreinData.countryAddConfirmRankList);
        let left1 = document.querySelector(".left1");
        that.addChart(left1, option1);
        // 大洲感染总人数趋势图
        const option2 = that.setOption3(foreinData.continentStatis);
        let left2 = document.querySelector(".left2");
        that.addChart(left2, option2);
        //外输入病情top10省份
        const option3 = that.setOption4(foreinData.importStatis);
        let left3 = document.querySelector(".left3");
        that.addChart(left3, option3);

        //疫情国家治愈率
        const option4 = that.setOption5(foreinData.foreignList);
        let left4 = document.querySelector(".left4");
        that.addChart(left4, option4);
        // 治愈和死亡人数
        const option5 = that.setOption6(foreinData.globalDailyHistory);
        let left5 = document.querySelector(".left5");
        that.addChart(left5, option5);
        //境外输入病情top10省份
        const option6 = that.setOption7(foreinData.importStatis);
        let left6 = document.querySelector(".left6");
        that.addChart(left6, option6);
      }
    });
  }
};
</script>
<style>
/* 全局样式 */
.center {
  font-size: 0.15rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow-y: scroll;
}
body {
  overflow: hidden;
}

@font-face {
  font-family: electronicFont;
  src: url(assets/font/DS-DIGIT.TTF);
}

li {
  list-style: none;
}
/* 内容区样式 */
#app {
  height: 110vh;
  background: url("./assets/image/bg.jpg") top center;
}
#content {
  padding: 10px 10px 0;
  display: flex;
}
#content .left {
  flex: 3;
}
#content .center {
  flex: 5;
}
#content .right {
  flex: 3;
}
.vmpanel {
  position: relative;
  height: 310px;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(~assets/image/line\(1\).png);
  padding: 0 15px 40px;
  margin-bottom: 15px;
}
.vmpanel .panelfooter {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panelcontent h2 {
  height: 48px;
  line-height: 48px;
  color: white;
  font-size: 20px;
  text-align: center;
  font-weight: 400;
}
.panelcontent .chart {
  height: 240px;
}
</style>
